<template>
  <view>
    <view class="header">
      <view class="userinfo mt-3">
        <view class="face">
          <image :src="userinfo.face"></image>
        </view>
        <view class="info">
          <view class="username">{{ userinfo.username }}</view>
          <view class="integral" @click="toServePage('/pages/users/user_info/user_info')">点击修改个人资料></view>
        </view>
      </view>
      <view class="userinfo-menu-group flex justify-between mt-3">
        <view class="flex flex-column justify-center align-center mx-3" v-for="(item, index) in cardInfo" :key="index">
          <text class="font-lg">{{ item.number }}</text>
          <text class="font-sm">{{ item.text }}</text>
        </view>
      </view>
    </view>
    <view class="m-3">
      <image class="rounded-lg w-100" style="height: 170rpx;" src="/static/image/img_1.png"></image>
    </view>
    <view class=" m-3 rounded-lg" style="background: #FFFFFF">
      <view class="flex justify-between align-center" :class="selectIndex ? 'opposite-active-img' : 'active-img' ">
        <view class="flex-1 text-center" :class="{ 'font-weight-bold' : !selectIndex }" @click="changeSelect(0)">服务订单</view>
        <view class="flex-1 text-center" :class="{ 'font-weight-bold' : selectIndex }" @click="changeSelect(1)">新机订单</view>
      </view>
      <view class="flex mt-3 pb-2">
        <view class="flex flex-column justify-between mx-3 align-center" style="width: 20%" v-for="(item, index) in showServeOrderAndNewOrderList"
              :key="index" @click="toServePage(item.url)">
          <image style="width: 25px;height: 25px;" :src="item.img"></image>
          <text class="font-weight-normal font-sm py-1">{{ item.text }}</text>
        </view>
      </view>
    </view>
    <!--    轮播图-->
    <swiper class="swiper m-3 " circular autoplay interval="4000" indicator-dots>
      <swiper-item class="rounded-lg" v-for="(item, index) in bannerList" :key="index">
        <image class="swiper-item" :src="item.img"></image>
      </swiper-item>
    </swiper>

    <!--    服务与工具-->
    <view class="rounded-lg bg-light m-3 p-3 flex flex-column">
      <text class="font-weight-bold">服务与工具</text>
      <view class="flex align-center flex-wrap">
        <view class="flex flex-column justify-center align-center mt-4" style="width: 25%"
              v-for="(item, index) in serveMenu" :key="index" @click="toServePage(item.url)">
          <image style="width: 25px;height: 25px;" :src="item.img"></image>
          <text class="font-sm pt-1">{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!--    商品分类-->
    <view class="tabs m-3">
      <view class="tabs-title" v-for="(item, index) in tabTitlesList" :key="index">
        <text class="tabs-title-text">
          {{ item.title }}
        </text>
        <text class="tabs-title-text-desc">
          {{ item.desc }}
        </text>
      </view>
    </view>
    <!--      内容栏-->
    <view class="tabs-content">
      <uni-card :border="false" :is-shadow="false" v-for="index in 8" :key="index">
        <view class="tabs-content-card">
          <image src="https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240103/1704276590862.jpg" mode="scaleToFill"></image>
          <view class="tabs-content-card-info">
            <view class="tabs-content-card-info-text">
              <text class="tabs-content-card-info-text-title">洗衣机维修</text>
              <text class="tabs-content-card-info-text-desc">保修90天·快速响应·维修计价器报价</text>
            </view>
            <view class="tabs-content-card-info-bottom">
              <view class="tabs-content-card-info-bottom-price">
                <text class="tabs-content-card-info-bottom-price-number">88</text>
                元/台起
              </view>
              <view class="tabs-content-card-info-bottom-button">
                <u-button type="primary" shape="circle" text="立即预约"></u-button>
              </view>
            </view>
          </view>
        </view>
      </uni-card>
    </view>

  </view>
</template>
<script>
export default {
  data() {
    return {
      userinfo: {},
      // 服务订单和新机订单
      selectIndex: 0,
      // 卡片列表
      cardInfo: [
        {
          number: 0,
          text: '优惠券'
        }, {
          number: 0,
          text: '权益卡'
        }, {
          number: 0,
          text: '保修卡'
        }, {
          number: 0,
          text: '返修'
        },
      ],
      // 服务订单和新机订单一起展示
      showServeOrderAndNewOrderList: [],
      // 服务订单
      serveOrderList: [
        {
          img: '/static/my-person/xiadan.png',
          text: '已下单',
          url: ''
        },
        {
          img: '/static/my-person/banshou.png',
          text: '服务中',
          url: ''
        },
        {
          img: '/static/my-person/tongguo.png',
          text: '已完成',
          url: ''
        },
        {
          img: '/static/my-person/all-order.png',
          text: '全部订单',
          url: ''
        },
      ],
      // 新机订单
      newOrderList: [
        {
          img: '/static/my-person/xiadan.png',
          text: '新机订单',
          url: ''
        },
      ],
      // 标签名
      tabTitlesList: [
        {
          title: '家电清洗',
          desc: '标准报价'
        },
        {
          title: '家电维修',
          desc: '修不好不收费'
        },
        {
          title: '管道疏通',
          desc: '标准报价'
        },
        {
          title: '水电维修',
          desc: '标准报价'
        },
      ],
      // 服务与工具
      serveMenu: [
        {
          img: '/static/my-person/present.png',
          text: '我的奖品',
          url: ''
        },
        {
          img: '/static/my-person/address.png',
          text: '地址管理',
          url: '/pages/users/address/address'
        },
        {
          img: '/static/my-person/kefu.png',
          text: '我的客服',
          url: ''
        },
        {
          img: '/static/my-person/tousu.png',
          text: '投诉反馈',
          url: ''
        },
        {
          img: '/static/my-person/hezuo.png',
          text: '企业合作',
          url: ''
        },
        {
          img: '/static/my-person/set.png',
          text: '设置',
          url: '/pages/users/set/set'
        },
        {
          img: '/static/my-person/hongbao.png',
          text: '领100元',
          url: ''
        },
        {
          img: '/static/my-person/zuoji.png',
          text: '投诉电话',
          url: ''
        },
      ],
      // banner
      bannerList: [
        {
          img: '/static/banner/img.png',
          url: ''
        },
        {
          img: '/static/banner/img_1.png',
          url: ''
        },
        {
          img: '/static/banner/img_2.png',
          url: ''
        },
      ]
    };
  },
  onLoad() {
    //加载
    this.init();
    this.initSeverOrderAndNewOrder()
  },
  methods: {
    init() {
      //用户信息
      this.userinfo = {
        face: 'https://cx-img.zmn.cn/Image/user/4.jpg',
        username: "VIP会员10240",
        integral: "1435"
      }
    },
    toServePage(url){
      uni.navigateTo({
        url
      })
    },
    // 服务订单tabs改变
    changeSelect(index){
      let { selectIndex, showSeverOrderAndNewOrderList } = this
      if (selectIndex !== index){
        showSeverOrderAndNewOrderList = []
        this.selectIndex = index
        this.initSeverOrderAndNewOrder()
      }
    },
    initSeverOrderAndNewOrder(){
      let { serveOrderList, newOrderList } =this
      switch (this.selectIndex){
        case 0:
          this.showServeOrderAndNewOrderList = serveOrderList
          break;
        case 1:
          this.showServeOrderAndNewOrderList = newOrderList
          break;
      }
    },
  }
}
</script>

<style lang="scss">
page {
  background: #f3f3f5;
}

.active-img {
  background-image: url("/static/my-person/img.png");
  height: 45px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 45px;
}
.opposite-active-img {
  background-image: url("/static/my-person/img_1.png");
  height: 45px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 45px;
}

.tabs {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;

  &-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &-text {
      font-size: 18px;
      font-weight: 700;
    }

    &-text-desc {
      font-size: $uni-text-text-grey;
      margin-top: 10px;
      color: $uni-text-color-grey;
    }
  }
}

.tabs-content {
  margin-top: 15px;

  &-card image {
    width: 190rpx;
    height: 190rpx;
    border-radius: $uni-border-radius;
  }

  &-card {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    &-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      margin-left: 10px;
      width: 65%;

      &-text {
        display: flex;
        flex-direction: column;

        &-title {
          font-size: 17px;
          font-weight: 700;
          color: black;
        }

        &-desc {
          font-size: $uni-text-text-grey;
          color: $uni-text-color-grey;
        }
      }

      &-bottom {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        &-price {
          color: red;

          &-number {
            font-size: 20px;
            font-weight: 500;
          }
        }

        &-button {
          text-align: right;
        }
      }
    }
  }
}

.swiper {
  height: 180rpx;

  .swiper-item {
    width: 100%;
    height: 100%;
  }
}

// top
.header {
  background-image: url("https://m.zmn.cn/static/mobile/img/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 92%;
  height: 40vw;
  padding: 0 4%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .userinfo {
    width: 90%;
    display: flex;

    .face {
      flex-shrink: 0;
      width: 15vw;
      height: 15vw;

      image {
        width: 100%;
        height: 100%;
        border-radius: 100%
      }
    }

    .info {
      display: flex;
      flex-flow: wrap;
      padding-left: 30upx;

      .username {
        width: 100%;
        font-size: 40upx
      }

      .integral {
        display: flex;
        align-items: center;
        height: 40upx;
        border-radius: 20upx;
        font-size: 24upx
      }
    }
  }

  .userinfo-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }

}


// center
.middle-container {
  background: #dad4d4;
}

.hover {
  background-color: #eee
}


.list {
  width: 100%;
  border-bottom: solid 26upx #f1f1f1;

  .li {
    width: 92%;
    height: 100upx;
    padding: 0 4%;
    border-bottom: solid 1upx #e7e7e7;
    display: flex;
    align-items: center;

    &.noborder {
      border-bottom: 0
    }

    .icon {
      flex-shrink: 0;
      width: 50upx;
      height: 50upx;

      image {
        width: 50upx;
        height: 50upx
      }
    }

    .text {
      padding-left: 20upx;
      width: 100%;
      color: #666
    }

    .to {
      flex-shrink: 0;
      width: 40upx;
      height: 40upx
    }
  }
}
</style>
